<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
  <script>
    /* 环境对象：指的是函数内部特殊的 变量this ，它代表着 当前函数运行时所处的环境
    作用：弄清楚this的指向，可以让我们的代码更简洁
    --函数的调用方式不同，this所指代的对象也不同
    --[谁调用，this就是谁]是判断this指向的粗略规则 */

    // function fn() {
    //   // 每个函数里面都有this 环境对象   
    //   console.log(this)   //普通函数里面this指向的是window
    // }
    // window.fn()

    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // console.log(this)  //指向调用者btn，谁调用了这个函数就指向谁
      this.style.color = 'red'
    })
  </script>
</body>

</html>